<template>
    <div>
        <div class="ui header">写下你自己的故事</div>
        <div class="ui clearfix form">
            <div class="required field">
                <label for="">标题</label>
                <input type="text" v-model="title"/>
            </div>
            <div class="ui header"></div>
            <div class="required field">
                <label for="">摘要</label>
                <textarea name="" id="" cols="20" rows="3" v-model="excerpt"></textarea>
            </div>
            <div class="ui header"></div>
            <div class="required field">
                <label for="">正文 (不少于10个字)</label>
                <quill-editor v-model="content" :options="editorOptions" ref="quillEditor"></quill-editor>
            </div>
            <div class="ui header"></div>
            <div class="ui submit blue button" @click="saveContent">保存</div>
            <div class="ui checkbox">
                <input type="checkbox" v-model="isPublish" name="example">
                <label>同时发布到广场</label>
            </div>
        </div>
    </div>
</template>

<script>
import {api_artical, serverAssetsRoot} from '@/api'
// rich text editor
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor, Quill } from 'vue-quill-editor'
import { container, ImageExtend, QuillWatch } from 'quill-image-extend-module'

Quill.register('modules/ImageExtend', ImageExtend)

export default {
    data () {
        return {
            editorOptions: {
                placeholder: '写下你的故事....',
                modules: {
                    toolbar: {
                        container: [
                            ['bold', 'italic', 'underline', 'strike'],
                            ['blockquote', 'code-block'],
                            ['image', 'link'],
                            [{'list': 'ordered'}, {'list': 'bullet'}],
                            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                            [{ 'indent': '-1'}, { 'indent': '+1' }]
                        ],
                        handlers: {
                            'image': function () {
                                QuillWatch.emit(this.quill.id)
                            }
                        }
                    },
                    ImageExtend: {
                        loading: true,
                        name: 'img',
                        action: '/api' + api_artical + '/upload-image',
                        response: (res) => {
                            console.log(res)
                            return serverAssetsRoot + res.imgPath
                        }
                    }
                }
            },
            title: '',
            excerpt: '',
            content: '',
            uploadingImgFlag: false,
            imgUploader: 'a1',
            isPublish: false
        }
    },
    components: {
        quillEditor
    },
    methods: {
        saveContent () {
            this.$http({
                method: 'post',
                url: api_artical + '/save',
                data: {
                    title: this.title,
                    excerpt: this.excerpt,
                    content: this.content,
                    isPublish: this.isPublish
                }
            })
            .then(_ => {
                this.$message({
                    type: 'success',
                    message: '保存成功！'
                })
                this.$router.push({path: '/artical/my'})
            })
        }
    },
    mounted () {

    }
}
</script>

<style lang="stylus" scoped>
.ui.checkbox
    margin-left 20px
</style>

